import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd'
import './style.less'
import { reqIndexIntro, reqTopicList } from '@/api/dataMarket' // 接口
import { HsAdminSpin } from '@hs-admin/base-components'
import { EMPTYTEXT } from '@hs-admin/utils'

const MarketBasicData: React.FC = () => {
  const navigate: any = useNavigate()
  const [basicDataDes, setBasicDataDes] = useState('')
  const [topicList, setTopicList] = useState<any[]>([])
  const [loading, setloading] = useState(true)

  // 跳转-详情页
  const handleItemDetail = (item: any) => {
    navigate(`/marketBasicData/themeDetail?id=${item.id}`)
  }
  // 获取数据-首页简介
  const getIndexIntro = async () => {
    const res = await reqIndexIntro()
    if (res.code === 200) {
      setBasicDataDes(res.data.intro)
    }
  }
  // 获取数据-主题列表
  const getTopicList = async () => {
    setloading(true)
    const res = await reqTopicList({ status: 'published' })
    setTopicList(res.items)
    setloading(false)
  }

  useEffect(() => {
    getIndexIntro()
    getTopicList()
  }, [])

  return (
    <div className="market-basic-data-wrapper">
      {loading && <HsAdminSpin />}
      <div className="top">
        <div className="top_text">
          <div className="title">基础数据</div>
          <div className="top_text_tip">{basicDataDes}</div>
        </div>
        <div className="top_img"></div>
      </div>

      <div className="content">
        <div className="title">数据主题</div>

        <div
          style={{
            maxHeight: 'calc(100vh - 358px)'
          }}>
          <div className="content_list">
            {topicList.map((item, index) => (
              <div className="content_list_item" key={index}>
                <div className="content_list_item_top">
                  <div className="topTitle">
                    <div className="topTitleName">{item.name}</div>
                    <div className="topTitleTwo">
                      数据量：
                      <a>{item.data_count >= 10000 ? (item.data_count / 10000).toFixed(2) + '万条' : (item.data_count || EMPTYTEXT) + '条'}</a>
                    </div>
                  </div>
                </div>

                <div className="content_list_item_mid" title={item.description}>
                  {item.description}
                </div>

                <div className="content_list_item_bottom">
                  <Button type="primary" onClick={() => handleItemDetail(item)}>
                    详情
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default MarketBasicData
